<template>
  <div class="common-layout">
    <el-container>
      <!-- 导航 -->
      <el-aside width="200px">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-sub-menu
            :index="index"
            v-for="(item, index) in leftnavall"
            :key="item._id"
          >
            <template #title>
              <el-icon><UserFilled /></el-icon>
              <span>{{ item.name }}</span>
            </template>
            <el-menu-item
              v-for="(item1, index) in item.child"
              :key="item1._id"
              :index="item1.path"
              @click="changeleftnav(item1.path)"
              >{{item1.name}}</el-menu-item
            >
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>
        <!-- 头部位置 -->
        <el-header>这是头部</el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { UserFilled, Memo } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
const router = useRouter();
// 路由的跳转
const changeleftnav = (e) => {
  router.push(e);
};
const leftnavall = ref([]);
onMounted(() => {
  axios.get("/api/leftnav/leftnav").then((res) => {
    leftnavall.value = res.data.userall;
  });
});
</script>

<style lang="less" scoped>
.el-aside {
  height: 100vh;
}
.el-menu {
  height: 100vh;
}
.el-header {
  background: black;
  color: white;
}
</style>